<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<!--导入模态框-->
<div class="modal fade" id="modal-import">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Excel信息导入</h4>
            </div>
            <div class="modal-body">
                <form id="importForm">
                    <div class="form-group">
                        <label>上次导入错误数据</label>
                        <a id="download-error"
                           th:data-url="@{/files/{user}/error.xls(user=${session.user.account})}"
                           href="javascript:void(0);">点击下载</a>
                    </div>
                    <!--<div class="form-group">
                        <label for="yearMonth">生产日报上传年月份</label>
                        <input type="text" class="form-control col-md-3" id="yearMonth" name="yearMonth"
                               th:value="${#dates.format(date, 'yyyy-MM')}" readonly="readonly"/>
                    </div>-->
                    <div class="form-group">
                        <label>选择Excel文件并上传</label>
                        <input class="btn" type="file" multiple="multiple" name="file">
                        <p class="help-block">请按模板格式进行导入，信息与模板信息对应，合报的采购计划不能导入。</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button shiro:hasPermission="buy:buyexport:add" id="btn-upload" type="button" class="btn btn-success">
                    <span class="Bold">上传</span>
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!--导入模态框-->
<div class="modal fade" id="modal-import-change">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Excel信息导入</h4>
            </div>
            <div class="modal-body">
                <form id="importChangeForm">
                    <div class="form-group">
                        <label>上次导入错误数据</label>
                        <a id="download-change-error"
                           th:data-url="@{/files/{user}/error2.xls(user=${session.user.account})}"
                           href="javascript:void(0);">点击下载</a>
                    </div>
                    <!--<div class="form-group">
                        <label for="yearMonth">生产日报上传年月份</label>
                        <input type="text" class="form-control col-md-3" id="yearMonth" name="yearMonth"
                               th:value="${#dates.format(date, 'yyyy-MM')}" readonly="readonly"/>
                    </div>-->
                    <div class="form-group">
                        <label>选择Excel文件并上传</label>
                        <input class="btn" type="file" multiple="multiple" name="file">
                        <p class="help-block">请按模板格式进行导入，信息与模板信息对应，合报的采购计划不能导入。</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button shiro:hasPermission="buy:buyexport:add" id="btn-upload-change" type="button"
                        class="btn btn-success">
                    <span class="Bold">上传</span>
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!--采购计划合报-->
<div class="modal fade" id="modal-merge">
    <div class="modal-dialog" style="width:1200px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">采购计划合报</h4>
            </div>
            <div class="modal-body">
                <table id="pre-merge-table"></table>
                <table id="merge-table"></table>
            </div>
            <div class="modal-footer">
                <!--<button type="button" class="btn btn-info" id="btn-merge">提交</button>-->
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!--编辑采购计划-->
<div class="modal fade" id="modal-edit">
    <div class="modal-dialog" style="width:1200px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">采购计划编辑</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" class="form-horizontal">
                    <input type="hidden" name="sppId">
                    <input type="hidden" name="rppId">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label class="col-sm-4 text-right">物料描述</label>
                                <div class="col-sm-8">
                                    <span id="rppMatDesc"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">计划员</label>
                                <div class="col-sm-8">
                                    <span id="rppPlanner"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">数量</label>
                                <div class="col-sm-8">
                                    <span id="rppNum"></span>
                                </div>
                            </div>
                            <!--                            <div class="form-group">-->
                            <!--                                <label class="col-sm-4 text-right">实用数量</label>-->
                            <!--                                <div class="col-sm-8">-->
                            <!--                                    <span id="rppRealNum"></span>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <!--                            <div class="form-group">-->
                            <!--                                <label class="col-sm-4 text-right">余量</label>-->
                            <!--                                <div class="col-sm-8">-->
                            <!--                                    <span id="rppOverNum"></span>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <div class="form-group">
                                <label class="col-sm-4 text-right">单位</label>
                                <div class="col-sm-8">
                                    <span id="rppUnit"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">型号/标准号</label>
                                <div class="col-sm-8">
                                    <span id="rppStandardNo"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">品牌</label>
                                <div class="col-sm-8">
                                    <span id="rppBrand"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">联系人</label>
                                <div class="col-sm-8">
                                    <span id="rppDesigner"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">分类</label>
                                <div class="col-sm-8">
                                    <span id="rppTypes"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">计划号</label>
                                <div class="col-sm-8">
                                    <span id="rppPlanNo"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">项目编号</label>
                                <div class="col-sm-8">
                                    <span id="rppProjectCode"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">项目名称</label>
                                <div class="col-sm-8">
                                    <span id="rppProjectName"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">部分</label>
                                <div class="col-sm-8">
                                    <span id="rppPart"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">备注</label>
                                <div class="col-sm-8">
                                    <span id="rppRemark"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">备注物料编码</label>
                                <div class="col-sm-8">
                                    <span id="rppRemarkSapCode"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">备注物料描述</label>
                                <div class="col-sm-8">
                                    <span id="rppRemarkMatDesc"></span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-7">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">物料描述</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="sppMatDesc" placeholder="物料描述">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">备注计划用途</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="sppProjectName" placeholder="备注计划用途">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">SAP物料编码</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="sppSapCode" placeholder="SAP物料编码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">数量</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="sppNum" autocomplete="off"
                                           placeholder="数量">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">计划采购日期</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control datepicker" name="sppPlanDate"
                                           placeholder="计划采购日期" readonly="readonly">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">供应商</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="sppSupplier" placeholder="供应商">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">品牌</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="sppBrand" autocomplete="off"
                                           placeholder="品牌">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">交货周期</label>
                                <div class="col-sm-8">
                                    <input type="number" step="1" class="form-control" name="sppPayCycle"
                                           autocomplete="off" placeholder="交货周期">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">仓库</label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="sppWhiId" title="">
                                        <option th:each="stock : ${stocks}" th:value="${stock.whiId}"
                                                th:text="${stock.whiName}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">业务员</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="sppBuyer" autocomplete="on"
                                           placeholder="业务员">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">备注</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="sppRemark" autocomplete="off"
                                           placeholder="备注">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">计划员备注</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="sppPlannerRemark" autocomplete="off"
                                           placeholder="计划员备注">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-edit">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>


<section class="content-header"><h1>采购计划编辑</h1></section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" onsubmit="return false;">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label>物料描述</label>
                                    <input type="text" name="rppMatDesc" class="form-control" placeholder="请输入提报或采购物料">
                                </div>
                                <div class="form-group">
                                    <label>SAP物料编码</label>
                                    <input type="text" name="sppSapCode" class="form-control" placeholder="请输入SAP物料编码">
                                </div>
                                <div class="form-group">
                                    <label>项目编号</label>
                                    <!--<input type="text" name="rppProjectCode" class="form-control" placeholder="请输入项目编号">-->
                                    <input type="hidden" style="display: none" name="rppProjectCodeArrayStr"/>
                                    <div class="form-control" name="rppProjectCodeArraySelect"
                                         style="OVERFLOW-Y: auto; OVERFLOW-X:hidden;width: 196px!important; display: inline-block; height:34px!important;-webkit-border-radius: 0 !important;-moz-border-radius: 0 !important;border-radius: 0 !important;width: 196px!important;">
                                    </div>
                                    <lable>
                                        <button type="button"
                                                class="btn-success btn-xs"
                                                style="
                                                font-weight: 900;
                                                border-radius: 5px"
                                                name="addRppProjectCodeArraySelect"><i
                                                class="glyphicon glyphicon-plus"></i></button>
                                        <button type="button"
                                                class="btn-danger btn-xs"
                                                style="font-weight: 900;border-radius: 5px"
                                                name="subtractRppProjectCodeArraySelect"><i
                                                class="glyphicon glyphicon-minus"></i></button>
                                    </lable>
                                </div>
                                <div class="form-group">
                                    <label>项目名称</label>
                                    <input type="text" name="rppProjectName" class="form-control" placeholder="请输入项目名称">
                                </div>
                                <div class="form-group">
                                    <label>业务员</label>
                                    <input type="text" name="sppBuyer" class="form-control" placeholder="请输入业务员">
                                </div>
                                <div class="form-group">
                                    <label>计划员</label>
                                    <input type="text" name="sppPlanner" class="form-control" placeholder="请输入计划员">
                                </div>
                                <div class="form-group">
                                    <label>计划员备注</label>
                                    <input type="text" name="sppPlannerRemark" class="form-control"
                                           placeholder="请输入计划员备注">
                                </div>
                                <div class="form-group">
                                    <label>型号/标准号</label>
                                    <input type="text" name="rppStandardNo" class="form-control"
                                           placeholder="请输入型号/标准号">
                                </div>
                                <div class="form-group">
                                    <label>采购计划状态</label>
                                    <select name="sppStatus" class="form-control">
                                        <option value="">全部</option>
                                        <option value="7" selected="selected">未编辑</option>
                                        <option value="8">已编辑</option>
                                        <option value="3">未导入OA</option>
                                        <option value="4">待OA审批</option>
                                        <option value="5">审批通过</option>
                                        <option value="6">审批不通过</option>
                                        <option value="100">已超期</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>提交状态</label>
                                    <select name="sppSubmitStatus" class="form-control">
                                        <option value="">全部</option>
                                        <option value="1" selected="selected">未提交</option>
                                        <option value="2">已提交</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>提报日期</label>
                                    <input type="text" class="form-control datepicker" name="startTime"
                                           readonly="readonly"/>
                                    <span> 至 </span>
                                    <input type="text" class="form-control datepicker" name="endTime"
                                           readonly="readonly"/>
                                </div>
                                <button type="button" class="btn btn-success" id="btn-search">
                                    <span class="Bold">搜索</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="box-body">
                    <div id="toolbar-main" class="form-inline">
                        <a shiro:hasPermission="buy:buyexport:edit" th:href="@{/buy/editBuyPlan/export/change}"
                           class="btn btn-primary pull-right" style="margin-right: 10px">
                            <span class="Bold">变更导出</span>
                        </a>
                        <a shiro:hasPermission="buy:buyexport:edit" href="javascript:void(0);"
                           class="btn btn-info pull-right" style="margin-right: 10px" onclick="openImportChangeModal()">
                            <span class="Bold">变更导入</span>
                        </a>
                        <a shiro:hasPermission="buy:buyexport:add" th:href="@{/buy/editBuyPlan/export}"
                           class="btn btn-primary pull-right" style="margin-right: 10px">
                            <span class="Bold">导出</span>
                        </a>
                        <a shiro:hasPermission="buy:buyexport:add" href="javascript:void(0);"
                           class="btn btn-info pull-right" style="margin-right: 10px" onclick="openImportModal()">
                            <span class="Bold">导入</span>
                        </a>
                        <a shiro:hasPermission="buy:buyedit:edit" href="javascript:void(0);"
                           class="btn btn-warning pull-right" style="margin-right: 10px" onclick="merge()">
                            <span class="Bold">合报</span>
                        </a>
                        <a shiro:hasPermission="buy:buyedit:edit" href="javascript:void(0);"
                           class="btn btn-success pull-right" style="margin-right: 10px" onclick="commitAll()">
                            <span class="Bold">全部提交</span>
                        </a>
                    </div>
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    /** 表格 */
    var table, preTable, mergeTable;
    var num, ids;
    var buyState = ['', '未提交', '已提交', '未导入OA', '导入OA', '审核通过', '审核不通过'];
    var colors = ['', "label-default", "label-success", "label-warning", "label-info", "label-success", "label-danger"];
    var toolbarHtml = "";

    /** 导入模态框 */
    function openImportModal() {
        js.modal.open("modal-import");
    }

    /** 变更导入模态框 */
    function openImportChangeModal() {
        js.modal.open("modal-import-change");
    }

    /** 删除采购计划 */
    function deleted(id) {
        js.confirmPost({
            content: "删除数据将无法恢复，确认删除吗？",
            url: ctx + "buy/editBuyPlan/delete",
            data: {
                id: id
            },
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                } else {
                    js.modal.warning(result.msg);
                }
            }
        });
    }

    /** 打开编辑模态框, 回显数据 */
    function openEditModal(sppId, rppId) {
        js.post({
            url: ctx + "buy/editBuyPlan/id",
            data: {
                sppId: sppId || 0,
                rppId: rppId
            },
            success: function (result) {
                var $editForm = $("#editForm");
                $editForm.fillSpan(result);
                $editForm.fillData(result);
                if ($("#editForm [name='sppWhiId']").val() == null) {
                    $("#editForm [name='sppWhiId']").val(2);
                }
                if (!sppId) {
                    // $editForm.find("input[name=sppMatDesc]").val(result.rppMatDesc);
                    if (result.rppPart != null) {
                        $editForm.find("input[name=sppProjectName]").val(result.rppProjectName + "；" + result.rppPart);
                    } else {
                        $editForm.find("input[name=sppProjectName]").val(result.rppProjectName);
                    }

                    $editForm.find("input[name=sppNum]").val(result.rppNum);
                    $editForm.find("input[name=sppUnit]").val(result.rppUnit);
                    $editForm.find("input[name=sppBrand]").val(result.rppBrand);
                    $editForm.find("input[name=sppRemark]").val(result.rppRemark);
                }
                js.modal.open("modal-edit");
                setTimeout(function () {
                    js.validate.validing("editForm");
                }, 500);
            }
        })
    }

    /** 提交采购计划 */
    function commit(id) {
        js.confirmPost({
            content: "确认提交吗？",
            url: ctx + "buy/editBuyPlan/commit",
            data: {
                id: id
            },
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                } else {
                    js.modal.warning(result.msg);
                }
            }
        });
    }

    /** 批量提交采购计划 */
    function commitAll() {
        var arr = js.table.selectColumns(table, "sppId");
        if (arr.length < 1) {
            js.modal.warning("请选择要提交的计划");
            return;
        }
        js.post({
            url: ctx + "buy/editBuyPlan/commitAll",
            data: {
                rppIds: js.table.selectColumns(table, "sppId")
            },
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                } else {
                    js.modal.warning(result.msg);
                }
            }
        })
    }

    /** 合报采购计划 */
    function merge() {

        let data = js.deduplication(js.table.selectRows("bootstrap-table"), "sppId");
        if (data.length < 2) {
            js.modal.warning("请选择要合报的计划");
            return;
        }
        if (js.deduplication(data, "sppMatDesc").length !== 1) {
            js.modal.warning("物料名称不一致");
            return;
        }
        if (js.deduplication(data, "sppSapCode").length !== 1) {
            js.modal.warning("SAP编码不一致");
            return;
        }
        /*if (js.deduplication(data, "sppUnit").length !== 1) {
            js.modal.alert("单位不一致");
            return;
        }*/
        ids = data.map(value => value.sppId);
        num = data.map(item => item.sppNum).reduce((x, y) => x + y);
        let result = JSON.parse(JSON.stringify(data));
        result[0].sppNum = num;
        result = result.splice(0, 1);
        js.table.load(preTable, data);
        js.table.load(mergeTable, result);
        js.modal.open("modal-merge");
    }

    /** 执行合并操作 */
    function applyMerge(id) {
        js.post({
            url: ctx + "buy/editBuyPlan/merge",
            data: {
                id: id,
                ids: ids,
                num: num
            },
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                    js.modal.hide("modal-merge");
                } else {
                    js.modal.warning(result.msg);
                }
            }
        });
    }

    /**单删项目编号*/
    function deleterppProjectCodeArraySelect(obj) {
        var selectArr = $("#queryForm [name='rppProjectCodeArrayStr']").val().split(',');
        delete selectArr[$(obj).parent().attr("data-index")];
        var selectVal = selectArr.join(',');
        if (selectVal[selectVal.length - 1] == ',') {
            selectVal = selectVal.substring(0, selectVal.length - 1);
        }
        if (selectVal[0] == ',') {
            selectVal = selectVal.substring(1, selectVal.length);
        }
        if (selectVal.length == 0) {
            $("#queryForm [name='rppProjectCodeArraySelect']").css("width", "196px");
        }
        $("#queryForm [name='rppProjectCodeArrayStr']").val(selectVal);
        $(obj).parent().remove();
        if ($("#queryForm [name='rppProjectCodeArraySelect']").width() < 196) {
            $("#queryForm [name='rppProjectCodeArraySelect']").css("width", "196px");
        }
    }

    /**批量撤销*/
    function revokeAll() {
        js.modal.confirm("您确认要撤销吗？", function () {
            var arr = js.table.selectColumns(table, "sppId");
            if (arr.length < 1) {
                js.modal.warning("请选择要提交的计划");
                return;
            }
            js.post({
                url: ctx + "buy/editBuyPlan/cancels",
                data: {
                    sppId: arr
                },
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                        js.modal.hide("modal-merge");
                    } else {
                        js.modal.warning(result.msg);
                    }
                }
            });
        });
    }

    /**
     *  撤销
     * */
    function cancel(sppId) {
        js.modal.confirm("您确认要撤销吗？", function () {
            js.post({
                url: ctx + "buy/editBuyPlan/cancel",
                data: {
                    sppId: sppId
                },
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                        js.modal.hide("modal-merge");
                    } else {
                        js.modal.warning(result.msg);
                    }
                }
            });
        });
    }

    function initMainTable(columns) {
        $("#bootstrap-table").bootstrapTable('destroy');
        /** 初始化表格 */
        table = js.table.init({
            url: ctx + "buy/editBuyPlan/list",
            paginationVAlign: 'both',
            showColumns: true,
            showExport: false,
            pageSize: 15,
            toolbar: '#toolbar-main',
            rowStyle: function (row) {
                if (row.sppRpcId) {
                    return {
                        classes: 'danger'
                    };
                } else {
                    return {};
                }
            },
            onLoadSuccess: function (data) {
                js.table.merge(table, data, "sppId", "ID", "sppStatus", "sppSapCode",
                    "sppMatDesc", "sppNum", "sppBrand", "sppPayCycle", "sppPlanDate", "whiName", "sppPlanner", "sppBuyer", "sppProjectName", "op");
            },
            columns: columns
        });
    }

    $(function () {
        toolbarHtml = $("#toolbar-main").html();
        $("title").html($("title").html() + " —— 采购计划编辑");
        /**添加项目编号*/
        $("#queryForm [name='addRppProjectCodeArraySelect']").click(function () {
            js.modal.prompt("请输入要搜索的项目编号", function (result) {
                if (result != null && result != "") {
                    $("#queryForm [name='rppProjectCodeArraySelect']").css("width", "auto");
                    var idVal = $("#queryForm [name='rppProjectCodeArraySelect']").children("span").length;
                    var optionHtml = '<span data-index="' + idVal + '" data="' + result + '" style="font-size: 16px; margin: 5px;border: #8B8986 1px solid;border-radius: 5px;background-color: #e9e9e9;color: #333333;padding-left: 5px;padding-right: 5px" value="' + result + '">' + result + '' +
                        '<button onclick="deleterppProjectCodeArraySelect(this)" onmouseover="this.style.color=\'white\';" onmouseout="this.style.color=\'#333333\';" type="button" style="outline: none;border: 0;background: transparent" name="btn_close">×</button></span>';
                    $("#queryForm [name='rppProjectCodeArraySelect']").append(optionHtml);
                    if ($("#queryForm [name='rppProjectCodeArraySelect']").width() < 196) {
                        $("#queryForm [name='rppProjectCodeArraySelect']").css("width", "196px");
                    }
                    var vals = "";
                    $("#queryForm [name='rppProjectCodeArraySelect']").children("span").each(function () {
                        vals += $(this).attr("data") + ",";
                    });
                    vals = vals.substring(0, vals.length - 1);
                    $("#queryForm [name='rppProjectCodeArrayStr']").val(vals);
                }
            })
        });

        /** 清空项目编号 */
        $("#queryForm [name='subtractRppProjectCodeArraySelect']").click(function () {
            $("#queryForm [name='rppProjectCodeSelect']").css("width", "196px");
            $("#queryForm [name='rppProjectCodeArraySelect']").empty();
            $("#queryForm [name='rppProjectCodeArrayStr']").val('');
        });

        /**
         * 状态切换
         * */
        $("#queryForm [name='sppStatus']").change(function () {
            let columns = new Array();
            var toolbar = '';
            if ($(this).val() === '3') {

                toolbarHtml = $("#toolbar-main").html();
                $("#toolbar-main").html('<button onclick="revokeAll()" shiro:hasPermission="buy:buyedit:edit" type="button" class="btn btn-primary">批量撤销</button>');
                columns = [
                    {
                        field: 'ID',
                        width: '30px',
                        checkbox: true,
                        formatter: function (value, row, index) {
                            if (row.sppStatus === 3 && (sessionUser.name == row.rppPlanner || sessionUser.name == '管理员')) {
                                return {disabled: false}
                            } else {
                                return {disabled: true}
                            }
                        }
                    },
                    /*{ title: "ID", field: 'rppId'},*/
                    {
                        title: '序号', field: 'id', width: '50px',
                        formatter: function (value, row, index, field) {
                            return index + 1;
                        }
                    },
                    {
                        title: "采购<br>状态", field: 'sppStatus',
                        formatter: function (value, row, index, field) {
                            if (value) {
                                return '<span class="badge ' + colors[value] + '">' + buyState[value] + '</span> ';
                            }
                        }
                    },
                    {
                        title: "型号/标准号", field: 'rppStandardNo',
                        formatter: function (value, row, index, field) {
                            if (value == null) {
                                value = '';
                            }
                            return value;
                        }
                    },
                    {title: "项目<br>编号", field: 'rppProjectCode'},
                    {title: "项目<br>名称", field: 'rppProjectName'},
                    // { title: "联系人", field: 'rppDesigner'},
                    {title: "提报<br>物料描述", field: 'rppMatDesc'},
                    {
                        title: "图号", field: 'rppDiagram',
                        formatter: function (value, row, index) {
                            return '<p style="word-wrap: break-word;width: 110px">' + value + '</p>';
                        }
                    },
                    {
                        title: "数量<br>单位", field: 'rppNum',
                        formatter: function (value, row, index) {
                            if (row.rppNum == null) {
                                row.rppNum = '';
                            }
                            return row.rppNum + "<br>" + row.rppUnit;
                        }
                    },
                    // { title: "单位", field: 'rppUnit'},
                    // { title: "标准号", field: 'rppStandardNo'},
                    {title: "提报日期", field: 'rppCreateTime', width: '90px'},
                    {title: "SAP<br>物料编号", field: 'sppSapCode'},
                    {title: "采购<br>物料描述", field: 'sppMatDesc'},
                    {
                        title: "采购<br>数量", field: 'sppNum',
                        formatter: function (value, row, index) {
                            if (value != null) {
                                let html = '';
                                if (row.rnum != row.sppNum) {
                                    html = '<span style="color:#337ab7">' + value + '</span>';
                                } else {
                                    html = '<span style="color:#333333">' + value + '</span>';
                                }
                                return html;
                            } else {
                                return '-';
                            }

                        }
                    },
                    {title: "品牌", field: 'sppBrand'},
                    {title: "交货<br>周期", field: 'sppPayCycle'},

                    {title: "仓库", field: 'whiName'},
                    {title: "计划员", field: 'sppPlanner'},
                    {title: "计划员备注", field: 'sppPlannerRemark'},
                    {title: "业务员", field: 'sppBuyer'},
                    {title: "备注<br>计划用途", field: 'sppProjectName', width: '180px'}, // （相当于采购计划备注，导入OA时用，有字数限制，不超过40字）
                    {
                        title: "计划<br>采购日期",
                        field: 'sppPlanDate',
                        width: '90px',
                        cellStyle: function (value, row, index) {
                            if (row.dateDiff > 0) {
                                return {
                                    css:
                                        {
                                            "color": "red"
                                        }
                                }
                            } else {
                                return {
                                    css:
                                        {
                                            "color": "#333333"
                                        }
                                }
                            }
                        }
                    },
                    {
                        field: 'op', title: "操作", width: '60px',
                        formatter: function (value, row, index) {
                            var actions = [];
                            if (sessionUser.name == row.rppPlanner || sessionUser.name == '管理员') {
                                if (row.sppStatus === 3 && hasP("buy:buyedit:edit")) {
                                    actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="cancel(' + row.sppId + ')"> 撤销</a> ');
                                }
                            }
                            return actions.join('');
                        }
                    }
                ];

                initMainTable(columns);
            } else {
                $("#toolbar-main").show();
                $("#toolbar-main").html(toolbarHtml);

                columns = [
                    {
                        field: 'ID',
                        width: '30px',
                        checkbox: true,
                        formatter: function (value, row, index) {
                            if (row.sppStatus === 1) {
                                return {disabled: false}
                            } else {
                                return {disabled: true}
                            }
                        }
                    },
                    /*{ title: "ID", field: 'rppId'},*/
                    {
                        title: '序号', field: 'id', width: '50px',
                        formatter: function (value, row, index, field) {
                            return index + 1;
                        }
                    },
                    {
                        title: "采购<br>状态", field: 'sppStatus',
                        formatter: function (value, row, index, field) {
                            if (value) {
                                return '<span class="badge ' + colors[value] + '">' + buyState[value] + '</span> ';
                            }
                        }
                    },
                    {
                        title: "型号/标准号", field: 'rppStandardNo',
                        formatter: function (value, row, index, field) {
                            if (value == null) {
                                value = '';
                            }
                            return value;
                        }
                    },
                    {title: "项目<br>编号", field: 'rppProjectCode'},
                    {title: "项目<br>名称", field: 'rppProjectName'},
                    // { title: "联系人", field: 'rppDesigner'},
                    {title: "提报<br>物料描述", field: 'rppMatDesc'},
                    {
                        title: "图号", field: 'rppDiagram',
                        formatter: function (value, row, index) {
                            if(value===null){
                                value = '';
                            }
                            return '<p style="word-wrap: break-word;width: 110px">' + value + '</p>';
                        }
                    },
                    {
                        title: "数量<br>单位", field: 'rppNum',
                        formatter: function (value, row, index) {
                            if (row.rppNum == null) {
                                row.rppNum = '';
                            }
                            return row.rppNum + "<br>" + row.rppUnit;
                        }
                    },
                    // { title: "单位", field: 'rppUnit'},
                    // { title: "标准号", field: 'rppStandardNo'},
                    {title: "提报日期", field: 'rppCreateTime', width: '90px'},
                    {title: "SAP<br>物料编号", field: 'sppSapCode'},
                    {title: "采购<br>物料描述", field: 'sppMatDesc'},
                    {
                        title: "采购<br>数量", field: 'sppNum',
                        formatter: function (value, row, index) {
                            if (value != null) {
                                let html = '';
                                if (row.rnum != row.sppNum) {
                                    html = '<span style="color:#337ab7">' + value + '</span>';
                                } else {
                                    html = '<span style="color:#333333">' + value + '</span>';
                                }
                                return html;
                            } else {
                                return '-';
                            }

                        }
                    },
                    {title: "品牌", field: 'sppBrand'},
                    {title: "交货<br>周期", field: 'sppPayCycle'},

                    {title: "仓库", field: 'whiName'},
                    {title: "计划员", field: 'sppPlanner'},
                    {title: "计划员备注", field: 'sppPlannerRemark'},
                    {title: "业务员", field: 'sppBuyer'},
                    {title: "备注<br>计划用途", field: 'sppProjectName', width: '180px'}, // （相当于采购计划备注，导入OA时用，有字数限制，不超过40字）
                    {
                        title: "计划<br>采购日期",
                        field: 'sppPlanDate',
                        width: '90px',
                        cellStyle: function (value, row, index) {
                            if (row.dateDiff > 0) {
                                return {
                                    css:
                                        {
                                            "color": "red"
                                        }
                                }
                            } else {
                                return {
                                    css:
                                        {
                                            "color": "#333333"
                                        }
                                }
                            }
                        }
                    },
                    {
                        field: 'op', title: "操作", width: '60px',
                        formatter: function (value, row, index) {
                            var actions = [];
                            if (sessionUser.name == row.rppPlanner || sessionUser.name == '管理员') {
                                if ((!row.sppStatus || row.sppStatus === 1 || row.sppStatus === 6) && hasP("buy:buyedit:edit")) {
                                    actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="openEditModal(' + row.sppId + ',' + row.rppId + ')"> 修改</a> ');
                                }
                                if (row.sppStatus === 1 && hasP("buy:buyedit:del")) {
                                    actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="deleted(' + row.sppId + ')"> 删除</a> ');
                                }
                                if ((row.sppStatus === 1 || row.sppStatus === 6) && hasP("buy:buyedit:edit")) {
                                    actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="commit(' + row.sppId + ')"> 提交</a> ');
                                }
                                if (row.sppStatus === 3 && hasP("buy:buyedit:edit")) {
                                    actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="cancel(' + row.sppId + ')"> 撤销</a> ');
                                }
                            }
                            return actions.join('');
                        }
                    }
                ];
                toolbar = '#toolbar-main';
                initMainTable(columns);
            }
        });

        let dataColumns = [
            {
                field: 'ID',
                width: '30px',
                checkbox: true,
                formatter: function (value, row, index) {
                    if (row.sppStatus === 1) {
                        return {disabled: false}
                    } else {
                        return {disabled: true}
                    }
                }
            },
            /*{ title: "ID", field: 'rppId'},*/
            {
                title: '序号', field: 'id', width: '50px',
                formatter: function (value, row, index, field) {
                    return index + 1;
                }
            },
            {
                title: "采购<br>状态", field: 'sppStatus',
                formatter: function (value, row, index, field) {
                    if (value) {
                        return '<span class="badge ' + colors[value] + '">' + buyState[value] + '</span> ';
                    }
                }
            },
            {
                title: "型号/标准号", field: 'rppStandardNo',
                formatter: function (value, row, index, field) {
                    if (value == null) {
                        value = '';
                    }
                    return value;
                }
            },
            {title: "项目<br>编号", field: 'rppProjectCode'},
            {title: "项目<br>名称", field: 'rppProjectName'},
            // { title: "联系人", field: 'rppDesigner'},
            {title: "提报<br>物料描述", field: 'rppMatDesc'},
            {
                title: "图号", field: 'rppDiagram',
                formatter: function (value, row, index) {
                    if(value===null){
                        value = '';
                    }
                    return '<p style="word-wrap: break-word;width: 110px">' + value + '</p>';
                }
            },
            {
                title: "数量<br>单位", field: 'rppNum',
                formatter: function (value, row, index) {
                    if (row.rppNum == null) {
                        row.rppNum = '';
                    }
                    return row.rppNum + "<br>" + row.rppUnit;
                }
            },
            // { title: "单位", field: 'rppUnit'},
            // { title: "标准号", field: 'rppStandardNo'},
            {title: "提报日期", field: 'rppCreateTime', width: '90px'},
            {title: "SAP<br>物料编号", field: 'sppSapCode'},
            {title: "采购<br>物料描述", field: 'sppMatDesc'},
            {
                title: "采购<br>数量", field: 'sppNum',
                formatter: function (value, row, index) {
                    if (value != null) {
                        let html = '';
                        if (row.rnum != row.sppNum) {
                            html = '<span style="color:#337ab7">' + value + '</span>';
                        } else {
                            html = '<span style="color:#333333">' + value + '</span>';
                        }
                        return html;
                    } else {
                        return '-';
                    }

                }
            },
            {title: "品牌", field: 'sppBrand'},
            {title: "交货<br>周期", field: 'sppPayCycle'},

            {title: "仓库", field: 'whiName'},
            {title: "计划员", field: 'sppPlanner'},
            {title: "计划员备注", field: 'sppPlannerRemark'},
            {title: "业务员", field: 'sppBuyer'},
            {title: "备注<br>计划用途", field: 'sppProjectName', width: '180px'}, // （相当于采购计划备注，导入OA时用，有字数限制，不超过40字）
            {
                title: "计划<br>采购日期", field: 'sppPlanDate', width: '90px', cellStyle: function (value, row, index) {
                    if (row.dateDiff > 0) {
                        return {
                            css:
                                {
                                    "color": "red"
                                }
                        }
                    } else {
                        return {
                            css:
                                {
                                    "color": "#333333"
                                }
                        }
                    }
                }
            },
            {
                field: 'op', title: "操作", width: '60px',
                formatter: function (value, row, index) {
                    var actions = [];
                    if (sessionUser.name == row.rppPlanner || sessionUser.name == '管理员') {
                        if ((!row.sppStatus || row.sppStatus === 1 || row.sppStatus === 6) && hasP("buy:buyedit:edit")) {
                            actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="openEditModal(' + row.sppId + ',' + row.rppId + ')"> 修改</a> ');
                        }
                        if (row.sppStatus === 1 && hasP("buy:buyedit:del")) {
                            actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="deleted(' + row.sppId + ')"> 删除</a> ');
                        }
                        if ((row.sppStatus === 1 || row.sppStatus === 6) && hasP("buy:buyedit:edit")) {
                            actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="commit(' + row.sppId + ')"> 提交</a> ');
                        }
                        if (row.sppStatus === 3 && hasP("buy:buyedit:edit")) {
                            actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="cancel(' + row.sppId + ')"> 撤销</a> ');
                        }
                    }
                    return actions.join('');
                }
            }
        ];
        initMainTable(dataColumns);


        preTable = js.table.init({
            id: "pre-merge-table",
            url: false,
            showColumns: false,
            pagination: false,
            showExport: false,
            sidePagination: null,
            columns: [
                {
                    title: '序号', width: '50px',
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                {
                    title: "采购<br>状态", field: 'sppStatus',
                    formatter: function (value, row, index, field) {
                        if (value) {
                            return buyState[value];
                        }
                    }
                },
                {title: "项目<br>编号", field: 'rppProjectCode'},
                {title: "项目<br>名称", field: 'rppProjectName'},
                // { title: "联系人", field: 'rppDesigner'},
                {title: "提报<br>物料描述", field: 'rppMatDesc'},
                {
                    title: "图号", field: 'rppDiagram',
                    formatter: function (value, row, index) {
                        if(value===null){
                            value = '';
                        }
                        return '<p style="word-wrap: break-word;width: 110px">' + value + '</p>';
                    }
                },
                {title: "数量", field: 'rppNum'},
                {title: "单位", field: 'rppUnit'},
                // { title: "标准号", field: 'rppStandardNo'},
                {title: "提报日期", field: 'rppCreateTime', width: '90px'},
                {title: "SAP<br>物料编码", field: 'sppSapCode'},
                {title: "采购<br>物料描述", field: 'sppMatDesc'},
                {title: "采购<br>数量", field: 'sppNum'},
                // { title: "品牌", field: 'sppBrand'},
                // { title: "交货<br>周期", field: 'sppPayCycle'},
                // { title: "仓库", field: 'whiName'},
                {title: "计划员", field: 'sppPlanner'},
                // { title: "业务员", field: 'sppBuyer'},
                {title: "备注<br>计划用途", field: 'sppProjectName'}, // （相当于采购计划备注，导入OA时用，有字数限制，不超过40字）
                {
                    title: "操作",
                    width: '60px',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="applyMerge(' + row.sppId + ')"> 选择</a> ');
                        return actions.join('');
                    }
                }
            ]
        });

        mergeTable = js.table.init({
            id: "merge-table",
            url: false,
            showColumns: false,
            pagination: false,
            showExport: false,
            sidePagination: null,
            columns: [
                {
                    title: '序号', width: '50px',
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                {
                    title: "采购<br>状态", field: 'sppStatus',
                    formatter: function (value, row, index, field) {
                        if (value) {
                            return buyState[value];
                        }
                    }
                },
                {title: "项目<br>编号", field: 'rppProjectCode'},
                {title: "项目<br>名称", field: 'rppProjectName'},
                // { title: "联系人", field: 'rppDesigner'},
                {title: "提报<br>物料描述", field: 'rppMatDesc'},
                {
                    title: "图号", field: 'rppDiagram',
                    formatter: function (value, row, index) {
                        if(value===null){
                            value = '';
                        }
                        return '<p style="word-wrap: break-word;width: 110px">' + value + '</p>';
                    }
                },
                {title: "数量", field: 'rppNum'},
                {title: "单位", field: 'rppUnit'},
                // { title: "标准号", field: 'rppStandardNo'},
                {title: "提报日期", field: 'rppCreateTime', width: '90px'},
                {title: "SAP<br>物料编码", field: 'sppSapCode'},
                {title: "采购<br>物料描述", field: 'sppMatDesc'},
                {title: "采购<br>数量", field: 'sppNum'},
                // { title: "品牌", field: 'sppBrand'},
                // { title: "交货<br>周期", field: 'sppPayCycle'},
                // { title: "仓库", field: 'whiName'},
                {title: "计划员", field: 'sppPlanner'},
                // { title: "业务员", field: 'sppBuyer'},
                {title: "备注<br>计划用途", field: 'sppProjectName'} // （相当于采购计划备注，导入OA时用，有字数限制，不超过40字）
            ]
        });

        /** 表格搜索 */
        $("#btn-search").click(function () {
            js.table.search(table);
        });

        /** 导入表单验证 */
        js.validate.init("importForm", {
            fields: {
                file: {
                    validators: {
                        notEmpty: {message: '上传文件不能为空'},
                        file: {extension: 'xls,xlsx', message: '请选择excel文件'}
                    }
                }
            }
        });

        /** 导入模态框隐藏事件，重置表单，重置验证 */
        js.modal.hideEvent("modal-import", function () {
            js.validate.reset("importForm");
            js.reset("importForm");
        });

        /** 导入提报计划 */
        $("#btn-upload").click(function () {
            var $this = $(this);
            $this.attr('disabled', true);
            js.validSubmit({
                formId: "importForm",
                url: ctx + "buy/editBuyPlan/import",
                data: new FormData($("#importForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        if (result.msg == '导入完成') {
                            js.modal.hide("modal-import");
                        }
                        js.table.refresh(table);
                        $this.attr('disabled', false);
                    }
                }
            });
        });

        /** 下载导入失败excel */
        $("#download-error").click(function () {
            var that = $(this);
            js.post({
                url: ctx + "buy/editReportPlan/exist",
                async: false,
                data: {
                    url: that.attr("data-url")
                },
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        that.attr("href", that.attr("data-url") + "?timeStamp=" + new Date().getTime());
                    } else {
                        js.modal.warning("没有需要处理的文件");
                    }
                }
            });
        });

        /** editForm 表单验证规则 */
        js.validate.init("editForm", {
            fields: {
                sppMatDesc: {validators: {notEmpty: {message: '请输入物料描述'}}},
                sppProjectName: {validators: {notEmpty: {message: '请输入备注计划用途'}}},
                sppSapCode: {validators: {notEmpty: {message: '请输入SAP物料编码'}}},
                sppNum: {validators: {notEmpty: {message: '请输入数量'}}},
                sppUnit: {validators: {notEmpty: {message: '请输入单位'}}},
                sppPayCycle: {validators: {notEmpty: {message: '请输入交货周期'}}},
                sppWhiId: {validators: {notEmpty: {message: '请选择仓库'}}},
                sppBuyer: {validators: {notEmpty: {message: '请输入业务员'}}}
            }
        });

        /** 修改采购计划 */
        $("#btn-edit").click(function () {
            if ($("#rppNum").text() != $("#editForm input[name=sppNum]").val()) {
                js.modal.confirm("采购数量与提报数量不一致", () => {
                    js.validSubmit({
                        formId: "editForm",
                        url: ctx + "buy/editBuyPlan/edit",
                        data: new FormData($("#editForm")[0]),
                        success: function (result) {
                            if (result.type === web_status.SUCCESS) {
                                js.modal.success(result.msg);
                                js.table.refresh(table);
                                js.modal.hide("modal-edit");
                            } else {
                                js.modal.warning(result.msg);
                            }
                        }
                    });
                });
            } else {
                js.validSubmit({
                    formId: "editForm",
                    url: ctx + "buy/editBuyPlan/edit",
                    data: new FormData($("#editForm")[0]),
                    success: function (result) {
                        if (result.type === web_status.SUCCESS) {
                            js.modal.success(result.msg);
                            js.table.refresh(table);
                            js.modal.hide("modal-edit");
                        } else {
                            js.modal.warning(result.msg);
                        }
                    }
                });
            }

        });

        /** 修改采购计划模态框隐藏事件， 重置表单，重置验证 */
        js.modal.hideEvent("modal-edit", function () {
            js.validate.reset("editForm");
            js.reset("editForm");
        });

        /** 合报采购计划 */
        /*$("#btn-merge").click( () => {
            js.post({
                url: ctx + "buy/editBuyPlan/merge",
                data: {
                    ids: ids,
                    num: num,
                },
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                        js.modal.hide("modal-merge");
                    } else {
                        js.modal.warning(result.msg);
                    }
                }
            });
        });*/


    });

</script>
</body>
</html>
